<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            width:300px;
            height: 300px;


            /*按方向对样式一一设置*/

            /*上边框线条样式：solid实线、dashed虚线、dotted点状线、double双实线、inset内嵌的3d线、outset外嵌的3d线*/
            border-top-style:solid;

            /*上边框的宽度*/
            border-top-width: 10px;

            /*上边框的颜色*/
            border-top-color:red;
        }
        .d2{
            width:400px;
            height: 400px;
            /*按样式简写*/
            /*border-width:10px;*/
            /*border-width:10px 20px;*/
            /*border-width: 10px 20px 22px;*/
            border-width:10px 13px 14px 20px;

            /*border-style:dashed;*/
            /*border-style:dashed double;*/
            border-style: solid dashed double dotted;
            border-color:green yellow;
        }

        .d3{
            width:400px;
            height: 400px;
            /*按方向简写*/
            border-top:1px solid red;
            border-right:2px dotted blue;
            border-bottom: 1px dashed pink;
            border-left:3px double black;
        }
        .d4{
            width:100px;
            height: 100px;

            /*终极简写*/
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
    <div class="d4"></div>
</body>
</html>